import React, { Component } from 'react'
import "antd/dist/antd.css"
import { Layout, Menu } from 'antd';
import Three from "./Three"
import Two from "./Two"
import Table from "./Tablebox"
import { HashRouter, Switch, Route ,Link} from "react-router-dom"
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
const { Header, Content, Sider } = Layout;

export class One extends Component {
    render() {
        return (
            <HashRouter>
                <Layout>
                    {/* 头部 */}
                    <Header className="header">
                        <div className="logo" />
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">
                                <Link to="/Home">nav 2</Link>
                            </Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    {/* 左边内容部分 */}
                    <Layout>
                        <Sider className="site-layout-background" width={200}>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                style={{ height: '100%', borderRight: 0 }}
                            >
                                <Menu.Item key="1" icon={<UserOutlined />}>
                                   <Link to="/">Option 1</Link>
                                </Menu.Item>
                                <Menu.Item key="2" icon={<LaptopOutlined />}>
                                    <Link to="/Two">Option 2</Link>
                                </Menu.Item>
                                <Menu.Item key="3" icon={<NotificationOutlined />}>
                                <Link to="/Three">Option 3</Link>
                                </Menu.Item>

                            </Menu>
                        </Sider>
                        {/* 右边内容 */}
                        <Content style={{ padding: '0 24px', minHeight: 280 }}>
                            {/* 显示内容 */}
                            <Switch>
                                <Route path='/Two' component={Two}></Route>
                                <Route path='/Three' component={Three}></Route>
                                <Route path='/' component={Table}></Route>
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
            </HashRouter>
        )
    }
}

export default One;
